import React from "react";
import index1 from "../../assets/lh/index.module.css";
import { GET_REMENSINGER } from "../../api/lh/index";
import GetSingers from "./GetSingers";
import GetWords from "./GetWords";
import store from "../../store/wwj/index";

class Singer extends React.Component {
    constructor() {
        super();
        this.state = {
            cat: ""
        };
    }
    componentDidMount() {
        store.dispatch(GET_REMENSINGER());
    }
    Getcat(cat) {
        this.setState({
            cat: cat
        });
    }
    SingerId(id) {
        this.props.history.push("/Songer");
        localStorage.setItem("SingerId", id);
    }
    render() {
        let { getremensinger, getsinger, getwords } = store.getState();
        const singers = [...getremensinger, ...getsinger, ...getwords];
        const datasinger = singers.map((item, index) => (
            <div
                className={index1.singerbody1}
                key={index}
                onClick={this.SingerId.bind(this, item.id)}
            >
                <div className={index1.img2}>
                    <img
                        src={item.img1v1Url}
                        alt=""
                        width="100%"
                        height="100%"
                    />
                </div>
                <span className={index1.name}>{item.name}</span>
            </div>
        ));

        return (
            <div className={index1.singer}>
                <GetSingers Getcat={this.Getcat.bind(this)}></GetSingers>
                <GetWords cat={this.state.cat}></GetWords>

                <div className={index1.singerbody}>{datasinger}</div>
            </div>
        );
    }
}

export default Singer;
